<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Snabbdom-demo</title>
		<style>
			body {
				background: #fafafa;
				font-family: sans-serif;
			}
			h1 {
				font-weight: normal;
			}
			.btn {
				display: inline-block;
				cursor: pointer;
				background: #fff;
				box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
				padding: 0.5em 0.8em;
				transition: box-shadow 0.05s ease-in-out;
				-webkit-transition: box-shadow 0.05s ease-in-out;
			}
			.btn:hover {
				box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
			}
			.btn:active,
			.active,
			.active:hover {
				box-shadow: 0 0 1px rgba(0, 0, 0, 0.2), inset 0 0 4px rgba(0, 0, 0, 0.1);
			}
			.add {
				float: right;
			}
			#container {
				max-width: 42em;
				margin: 0 auto 2em auto;
			}
			.list {
				position: relative;
			}
			.row {
				overflow: hidden;
				position: absolute;
				box-sizing: border-box;
				width: 100%;
				left: 0px;
				margin: 0.5em 0;
				padding: 1em;
				background: #fff;
				box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
				transition: transform 0.5s ease-in-out, opacity 0.5s ease-out,
					left 0.5s ease-in-out;
				-webkit-transition: transform 0.5s ease-in-out, opacity 0.5s ease-out,
					left 0.5s ease-in-out;
			}
			.row div {
				display: inline-block;
				vertical-align: middle;
			}
			.row > div:nth-child(1) {
				width: 5%;
			}
			.row > div:nth-child(2) {
				width: 10%;
			}
			.row > div:nth-child(3) {
				width: 56%;
			}
            .row > div:nth-child(4) {
				width: 10%;
			}
			.rm-btn {
				cursor: pointer;
				position: absolute;
				top: 0;
				right: 0;
				color: #c25151;
				width: 1.4em;
				height: 1.4em;
				text-align: center;
				line-height: 1.4em;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<div id="app"></div>
		<script src="./src/move.js"></script>
	</body>
</html>
